<template>
    <el-dropdown trigger="click" @command="handleSetSize">
        <div>
            <svg t="1670469100548" class="size-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2653" width="200" height="200">
                <path
                    d="M512 128a384 384 0 1 0 0 768 384 384 0 0 0 0-768z m0 85.333333a298.666667 298.666667 0 1 1 0 597.333334 298.666667 298.666667 0 0 1 0-597.333334z"
                    p-id="2654"></path>
                <path
                    d="M512 512m-213.333333 0a213.333333 213.333333 0 1 0 426.666666 0 213.333333 213.333333 0 1 0-426.666666 0Z"
                    p-id="2655"></path>
            </svg>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="size === 'medium'" command="medium">
                中等
            </el-dropdown-item>
            <el-dropdown-item :disabled="size === 'small'" command="small">
                小型
            </el-dropdown-item>
            <el-dropdown-item :disabled="size === 'mini'" command="mini">
                迷你
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'SizeSelect',
    computed: {
        ...mapGetters(['size'])
    },
    methods: {
        handleSetSize(size) {
            this.$ELEMENT.size = size
            this.$store.dispatch('app/setSize', size)
            this.refreshView()
            this.$message({
                message: '布局大小已更改',
                type: 'success'
            })
        },
        refreshView() {
            // 强制刷新视图
            this.$router.replace({
                path: '/redirect' + this.$route.fullPath
            })
        }
    }
}
</script>

<style scoped>
.size-icon {
    width: 20px;
    height: 20px;
    fill: #5a5e66;
    vertical-align: middle;
}
</style>